<template>
	<view>
		<view class="login">
			<view class="login-Title">登录 ！</view>
			<view class="login-Desc">
				登录后即可发起留言，查看官方回复等
			</view>
			<view class="quick-wechat-login">
				<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="getPhone2"><i
						class="icon-wechat"></i>微信一键登录</button>
			</view>
			<view class="otherLogin">

				<view class="alogin"  @click="numberLogin">账号密码登录</view>
				<view class="alogin" @click="codeLogin">手机短信登录</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import Lylist from '@/uni_modules/Lylist/Lylist.vue';
	import {
		dowxLogin
	} from '@/api/api.js';
	export default {
		components: {
			Lylist
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['userLogin', 'logout']),
			Vuexlogin(provider) {
				this.userLogin(provider)
				uni.navigateBack({
					delta: 2
				})
			},
			numberLogin(){
				uni.navigateTo({
					url: "/pages/user/numberlogin"
				})
			},
			codeLogin() {
				uni.navigateTo({
					url: "/pages/user/codelogin"
				})
			},
			goLogin() {
				uni.navigateTo({
					url: "/pages/user/login"
				})
			},
			authorizeInfo(e, code) {

				var that = this;
				dowxLogin({
					code: code,
					encryptedData: e.encryptedData,
					iv: e.iv
				}).then(r => {
					if (r.data.code == 200) {
						console.log(r)
						if (r.data.data.id) {
							that.Vuexlogin(r.data.data)
						}
					} else {
						uni.showToast({
							title: '网络忙，请重试',
							icon: 'error'
						})
					}
				})
			},
			clicklogout() {
				this.logout()
			},
			getPhoneNumber: function(e) {
				var that = this;

				if (e.detail.errMsg == "getPhoneNumber:ok") {
					uni.showLoading({
						mask: true,
						title: '加载中'
					})

					uni.login({
						provider: 'weixin',
						success: result => {
							if (result && result.code) {
								// 此时获取到了用户信息和code，使用这些信息去调用后端接口实现自身逻辑
								that.authorizeInfo(e.detail, result.code);
							}
						},
						fail: result => {
							console.log(result)
						},
						complete() {
							uni.hideLoading()
						}
					});

				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.otherLogin {
		margin: 60rpx 0;
		display: flex;
		justify-content: space-between;
		color: #369;
		font-size: 28rpx;
	}

	.login {
		padding: 40rpx 80rpx;
		margin-top: calc(50vh - 400rpx);

		&-Title {
			font-size: 60rpx;
			font-weight: bold;
			color: $base-color;
		}

		&-Desc {
			font-size: 32rpx;
			color: #999;
			margin: 20rpx 0;
		}

		.getPhone2 {
			margin-top: 60rpx;
			background-color: $base-color !important;
			border: none !important;
			color: #fff !important;
			padding: 0 !important;
			font-size: 32rpx !important;
			line-height: 90rpx;
			height: 90rpx;
			text-align: center;

			&:after {
				border: none !important;
			}

		}
	}
</style>